<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS console</title>

<!-- Bootstrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet">

<!-- Icon -->
<link rel="shortcut icon" href="favicon.png">
<style type="text/css">
body { background:#d2dfe6;
    color: #444;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.5em;
    scrollbar-arrow-color:black;
    scrollbar-face-color: black; /*立体滚动条的颜色（包括箭头部分的背景色）*/
    scrollbar-3dlight-color: black; /*立体滚动条亮边的颜色*/
    scrollbar-shadow-color: #4d4d4d; /*立体滚动条阴影的颜色*/
    scrollbar-darkshadow-color: black; /*立体滚动条外阴影的颜色*/
    scrollbar-track-color: black; /*立体滚动条背景颜色*/
    scrollbar-base-color:black; /*滚动条的基色*/
    height: 100%;
    position: absolute;
    width: 100%;
    padding-bottom:90px;
    overflow: hidden;
}

/* FINDER WINDOW */

#window{
    width: 100%;
    margin-top:0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:0px;
    min-width: 500px;
    background: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.75);
    /*-webkit-transition:all 0.5s; */
    overflow: hidden;
    height: 100%;
}

/* TOP BAR */
#topbar{
    width: 100%;
    height: 5%;
    min-height: 21px !important;
    font-size: 16px;
    font-family: "Myriad Pro", sans-serif;
    text-shadow:0px 1px 0px rgba(255,255,255,0.25);
    -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.5);
    -moz-box-shadow:0 1px 0 rgba(0,0,0,0.5);


}
#topbar ul li {
    float: left;
    padding:0 10px;
    height: 21px;
    line-height: 24px;
}
#topbar ul li:first-child{
    font-size: 20px;
    line-height: 26px;
    margin-left: 5px;
}
#topbar ul li:nth-child(2){
    font-family: "Myriad-Semi", sans-serif;
}
#topbar ul li:active{
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #4a82ff),color-stop(0, #0052fc));
    color: #fff;
    text-shadow: none;
}
#toolbar{
    width: 100%;
    height: 5%;
    min-height: 25px !important;
    background: grey;
    border-radius:5px 5px 0 0;

    background: #cfcfcf; /* Old browsers */
    background: -moz-linear-gradient(top,  #cfcfcf 0%, #a8a8a8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfcfcf), color-stop(100%,#a8a8a8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #cfcfcf 0%,#a8a8a8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #cfcfcf 0%,#a8a8a8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #cfcfcf 0%,#a8a8a8 100%); /* IE10+ */
    background: linear-gradient(top,  #cfcfcf 0%,#a8a8a8 100%); /* W3C */

    -webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5) inset,0px 1px 0px #515151;
    -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5) inset,0px 1px 0px #515151;
    box-shadow:0px 1px 0px rgba(255,255,255,0.5) inset,0px 1px 0px #515151;

}
#toolbar .top{
    float: left;
    width: 100%;
    height: 23px;
}
#toolbar .bottom{
    float: left;
    width: 100%;
    height: 30px;
}

/*-----TRAFFIC LIGHTS-----*/
#toolbar #lights{
    float: left;
    position:relative;
    top:4px;
    left:7px;
}
.light{
    float:left;
    width:14px;
    height:14px;
    border-radius:14px;
    -webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5),0px 0px 3px #000 inset;
    -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5),0px 0px 3px #000 inset;
    box-shadow:0px 1px 0px rgba(255,255,255,0.5),0px 0px 3px #000 inset;
    overflow: hidden;
}
#lights:hover .glyph{
    opacity: 1;
    cursor:default;

}
.light .shine{
    width: 4px;
    height:3px;
    border-radius:10px;
    /*background-image: -webkit-gradient(radial, center center, 0, center center, 3, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));*/
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */

}
.light .glow{
    width:14px;
    height:8px;
    background-image: -webkit-gradient(radial, center bottom, 0, center center, 5, from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0)));
    background: 0px 0px -moz-radial-gradient(bottom, cover,  rgba(255,255,255,0.70) 0%, rgba(255,255,255,0) 80%); /* FF3.6+ */

}
/*--RED--*/
.red{
    background: #f41b16; /* Old browsers */
    background: -moz-linear-gradient(top,  #f41b16 0%, #fc7471 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f41b16), color-stop(100%,#fc7471)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f41b16 0%,#fc7471 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f41b16 0%,#fc7471 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f41b16 0%,#fc7471 100%); /* IE10+ */
    background: linear-gradient(top,  #f41b16 0%,#fc7471 100%); /* W3C */
}
.red:active{

    background: #972f2e; /* Old browsers */
    background: -moz-linear-gradient(top,  #972f2e 0%, #fc7471 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#972f2e), color-stop(100%,#fc7471)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #972f2e 0%,#fc7471 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #972f2e 0%,#fc7471 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #972f2e 0%,#fc7471 100%); /* IE10+ */
    background: linear-gradient(top,  #972f2e 0%,#fc7471 100%); /* W3C */
}
.red .shine{
    position: relative;
    top: -23px;
    left: 5px;
}
.red .glow{
    position: relative;
    top: -22px;
}
.red .glyph{
    position: relative;
    top: -6px;
    left: 3px;
    font-size: 14px;
    font-weight: bold;
    color: #9b3a36;
    z-index: 50;
    opacity: 0;
}
/*--YELLOW--*/
.yellow{
    background: #f4a316; /* Old browsers */
    background: -moz-linear-gradient(left,  #f4a316 0%, #fcc371 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f4a316), color-stop(100%,#fcc371)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #f4a316 0%,#fcc371 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #f4a316 0%,#fcc371 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #f4a316 0%,#fcc371 100%); /* IE10+ */
    background: linear-gradient(left,  #f4a316 0%,#fcc371 100%); /* W3C */
    margin:0px 7px;
}
.yellow:active{
    background: #ae4f1e; /* Old browsers */
    background: -moz-linear-gradient(top,  #ae4f1e 0%, #fcc371 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ae4f1e), color-stop(100%,#fcc371)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ae4f1e 0%,#fcc371 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ae4f1e 0%,#fcc371 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ae4f1e 0%,#fcc371 100%); /* IE10+ */
    background: linear-gradient(top,  #ae4f1e 0%,#fcc371 100%); /* W3C */
}
.yellow .shine{
    position: relative;
    top: -23px;
    left: 5px;
}
.yellow .glow{
    position: relative;
    top: -22px;
}


.yellow .glyph{
    position: relative;
    top: -7px;
    left: 4px;
    font-size: 24px;
    color: #854322;
    z-index: 50;
    opacity: 0;
    -webkit-transform: scaleY(1.5) scaleX(1.3);
}

/*--GREEN--*/
.green{

    background: #4cae2e; /* Old browsers */
    background: -moz-linear-gradient(top,  #4cae2e 0%, #dafc71 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4cae2e), color-stop(100%,#dafc71)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #4cae2e 0%,#dafc71 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #4cae2e 0%,#dafc71 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #4cae2e 0%,#dafc71 100%); /* IE10+ */
    background: linear-gradient(top,  #4cae2e 0%,#dafc71 100%); /* W3C */

}
.green:active{
    background: #48752b; /* Old browsers */
    background: -moz-linear-gradient(top,  #48752b 0%, #dafc71 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#48752b), color-stop(100%,#dafc71)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #48752b 0%,#dafc71 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #48752b 0%,#dafc71 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #48752b 0%,#dafc71 100%); /* IE10+ */
    background: linear-gradient(top,  #48752b 0%,#dafc71 100%); /* W3C */

}
.green .shine{
    position: relative;
    top: -22px;
    left: 5px;
}
.green .glow{
    position: relative;
    top: -22px;
}
.green .glyph{
    position: relative;
    top: -6px;
    left: 3px;
    font-size: 14px;
    font-weight: bold;
    color: #25571d;
    z-index: 50;
    opacity: 0;
}

/* Horrible to do this for firefox */
@-moz-document url-prefix() {

    .red .glyph {
        position: relative;
        top: -4px;
    }
    .yellow .glyph {
        top: -4px;
        left: 3px;
    }

    .green .glyph{
        position: relative;
        top: -4px;
    }

}

#title{
    float: left;
    position: relative;
    top:4px;
    width:40%;
    left: 30%;
    font-family: "Myriad Pro", sans-serif;
    font-size: 14px;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
    line-height: 14px;
}
.folder{
    float: left;
    margin-right:5px;
}
.folder .tab{
    width:4px;
    height:2px;
    background:#a4c5da;
    border:1px solid #728ea3;
    border-bottom: none;
    border-radius:2px 2px 0px 0px;
    -webkit-box-shadow:0px -1px 0px #99b5c7 inset;
    margin-left: 1px;
    z-index: 5000;
    margin-bottom: -1px;
}
.folder .body{
    width: 14px;
    height: 10px;
    border:1px solid #6e8ba1;

    background: #b8cfe0; /* Old browsers */
    background: -moz-linear-gradient(top,  #b8cfe0 0%, #86adc8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8cfe0), color-stop(100%,#86adc8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b8cfe0 0%,#86adc8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b8cfe0 0%,#86adc8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b8cfe0 0%,#86adc8 100%); /* IE10+ */
    background: linear-gradient(top,  #b8cfe0 0%,#86adc8 100%); /* W3C */

    z-index: -50;

    -webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.25) inset,0px 1px 0px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.25) inset,0px 1px 0px rgba(0,0,0,0.2);
}


#body {
    font-family: Andale Mono, monospace;  line-height: 1em;
    font-size:13px;
    /*float: left;*/
    width: 100%;
    background:#000;
    padding-top:10px;
    padding-bottom:10px;
    line-height:1.5em;
    overflow-y:auto;
    height: 95%;
    position: absolute;
}
.cursor {
    background:#63de00;
    display:inline-block;
    width:11px;
    height:19px;
    margin-bottom:80px;
    margin-left: 10px;
    -webkit-animation-name: blink;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blink;
    -moz-animation-duration: 1.5s;
    -moz-animation-iteration-count: infinite;
}
@keyframes blink
{
    0%   {  background:rgba(99,222,0,100);  }
    100% {  background:rgba(99,222,0,0);  }
}

@-webkit-keyframes blink {
    0%   {  background:rgba(99,222,0,100);  }
    100% {  background:rgba(99,222,0,0);  }
}
@-moz-keyframes blink {
    0%   {  background:rgba(99,222,0,100);  }
    100% {  background:rgba(99,222,0,0);  }
}

#content{
    float: left;
    margin-top: 1px;
}


.fix-width{
    width: 100%;
}
.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #000000;
}
::-webkit-scrollbar-thumb{
    border-radius: 3px;
    background: #000000;
    border: 1px solid #737373;
}
</style>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<div id="window">
    <div id="toolbar">
        <div class="top">
            <div id="lights">
                <div class="light red">
                    <div class="glyph">×</div>
                    <div class="shine"></div>
                    <div class="glow"></div>
                </div>
                <div class="light yellow">
                    <div class="glyph">-</div>
                    <div class="shine"></div>
                    <div class="glow"></div>
                </div>
                <div class="light green">
                    <div class="glyph">+</div>
                    <div class="shine"></div>
                    <div class="glow"></div>
                </div>
            </div>
            <div id="title">
                <div class="folder">
                    <div class="tab"></div>
                    <div class="body"></div>
                </div>
                JavaCompile System
            </div>
            <div id="bubble">
                <div class="shine"></div>
                <div class="glow"></div>
            </div>
        </div>
    </div>

    <div id="body">
        <div id="bind"></div>
        <div class="cursor"></div>
    </div>
</div>
<div class="fixed-top fixed-left fixed-bottom fixed-right fix-width">
    <button class="btn btn-info btn-large btn-block">JS console</button>
    <input class="form-control" type="text" id="target" autofocus="true" placeholder="Code here, Enter to run . . .">
</div>

<script>
    console.log = function (arg) {
        var color;
        var gray = "gray";
        var black = "#63de00";
        var blue = "darkblue";
        switch (typeof(arg)) {
            case "undefined":
                color = gray;
                break;
            case "object":
                color = arg == null ? gray : black;
                break;
            case "number":
                color = blue;
                break;
            case "string":
                color = black;
                break;
            case "boolean":
                color = black;
                break;
            case "function":
                color = black;
                break;
        }
        if(typeof(arg)!="undefined"){
            append_log_node(arg,color);
        }
    };
    function run(codes){
        try  {
            console.log(eval(codes));
        }
        catch(exception) {
            console.log(exception);
        }
    }

    function append_log_node(info,color) {
        var log=document.createElement("H6");
        log.innerHTML=info
        log.setAttribute("style","padding:5px 15px 5px 15px;color:"+ color);
        document.getElementById('bind').appendChild(log);
        $("#body")[0].scrollTop =  $("#body")[0].scrollHeight-70;
    }

</script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function()
    {
        $(document).keypress(function(e){
            var curKey = e.which;
            if(curKey == 13)
            {
                run($("#target").val());
                $("#target").val("");
            }
        });
    });
</script>
</body>
</html>
